{% extends 'esign/base.html' %}
{% load static %}
{% block content %}
 



<div class="container-fluid">
  <div class="row justify-content-center mb-4">
      <div class="col-12">

        <nav class="nav nav-pills nav-justified nav-tabs" id="signature-status-nav-tab" role="tablist">
          <button class="nav-link active rounded-bottom-0 py-2" id="nav-document-drafts-tab" data-bs-toggle="tab" data-bs-target="#nav-document-drafts" type="button" role="tab" aria-controls="nav-document-drafts" aria-selected="true"><div class="d-flex align-items-center justify-content-center"><i class="fas fa-pencil-alt me-3 fs-20 text-success"></i> <div class="text-start"><span class="fs-18 fw-semibold text-success">Drafts</span> <small class="d-block">12 Document</small></div></div></button>

          <button class="nav-link rounded-bottom-0 py-2" id="nav-document-action-required-tab" data-bs-toggle="tab" data-bs-target="#nav-document-action-required" type="button" role="tab" aria-controls="nav-document-action-required" aria-selected="false"><div class="d-flex align-items-center justify-content-center"><i class="fas fa-info-circle me-3 fs-20 text-warning"></i> <div class="text-start"><span class="fs-18 fw-semibold text-warning">Action Required</span> <small class="d-block">12 Document</small></div></div></button>

          <button class="nav-link rounded-bottom-0 py-2" id="nav-waiting-for-others-tab" data-bs-toggle="tab" data-bs-target="#nav-waiting-for-others" type="button" role="tab" aria-controls="nav-waiting-for-others" aria-selected="false"><div class="d-flex align-items-center justify-content-center"><i class="fas fa-user-friends me-3 fs-20 text-info"></i> <div class="text-start"><span class="fs-18 fw-semibold text-info">Waiting for Others</span> <small class="d-block">12 Document</small></div></div></button>

          <button class="nav-link rounded-bottom-0 py-2" id="nav-document-finalized-tab" data-bs-toggle="tab" data-bs-target="#nav-document-finalized" type="button" role="tab" aria-controls="nav-document-finalized" aria-selected="false"><div class="d-flex align-items-center justify-content-center"><i class="fas fa-check-circle me-3 fs-20 text-success"></i> <div class="text-start"><span class="fs-18 fw-semibold text-success">Finalized</span> <small class="d-block">12 Document</small></div></div></button>
        </nav>

        <div class="tab-content border bg-light rounded-bottom" id="nav-tabContent">
          <div class="tab-pane fade active show" id="nav-document-drafts" role="tabpanel" aria-labelledby="nav-document-drafts-tab">
            <!-- start card -->
          <div class="card mb-0">
              <div class="card-header">
                  <div class="row align-items-center">
                      <div class="card border-0 mb-0">
                          <!-- start table search form--> 
                               <!-- <input type="hidden" name="active_tab" value="document-drafts"> -->

                         <form class="row align-items-center filter-form" method="get">
                               <input type="hidden" name="active_tab" value="document-drafts">

    <div class="col-auto">
        <input type="text" name="drafts_doc_id" placeholder="Doc ID" class="form-control" value="{{ drafts_filters.doc_id }}">
    </div>
    <div class="col-auto">
        <input type="text" name="drafts_file_name" placeholder="File Name" class="form-control" value="{{ drafts_filters.file_name }}">
    </div>
    <div class="col-auto">
        <input type="text" name="drafts_category" placeholder="Category" class="form-control" value="{{ drafts_filters.category }}">
    </div>
    <div class="col-auto">
        <input type="text" name="drafts_status" placeholder="Status" class="form-control" value="{{ drafts_filters.status }}">
    </div>
    <div class="col-auto">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>


                          </div>
                  </div>  <!--end row-->                                  
              </div><!--end card-header-->
              <div class="card-body pt-0">
                  <div class="table-responsive-none">
                      <table class="table mb-3 table-centered border-bottom table-hover">
                          <thead class="table-light">
                          <tr>
                              <th>#</th>
                              <th>Doc ID</th>
                              <th>File Name</th>
                              <th>Category</th>
                              <th>Signers</th>
                              <th>Date</th>
                              <th>Status</th>
                              <th>Document Type</th>
                              <th class="text-end">Action</th>
                          </tr>
                          </thead>
                          <tbody>
                          {% for doc in drafts %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>#{{ doc.id }}</td>
                    <td>{{ doc.title }}</td>
                    <td>{{ doc.category }}</td>
                   <td>
    <div class="d-flex justify-content-center align-items-center">
        {% for signer in doc.sign_flow.all|slice:":3" %}
            <div class="position-relative" style="margin-left: {% if not forloop.first %}-10px{% else %}0{% endif %};">
                <div class="thumb-md rounded-circle d-flex justify-content-center align-items-center text-white fw-bold"
                     style="background-color:#0d6efd; border:2px solid #fff;"
                     title="{{ signer.recipient_email }}">
                    {{ signer.recipient_email|slice:":1"|upper }}
                </div>
            </div>
        {% endfor %}

        {% if doc.sign_flow.count > 3 %}
            <div class="position-relative ms-1">
                <span class="thumb-md shadow-sm d-flex justify-content-center align-items-center bg-info-subtle rounded-circle fw-semibold fs-6 border border-white"
                      title="{{ doc.sign_flow.count|add:"-3" }} more signers">
                    +{{ doc.sign_flow.count|add:"-3" }}
                </span>
            </div>
        {% endif %}
    </div>
</td>

                    <td>{{ doc.created_at|date:"M d, Y H:i" }}</td>
                    <td>{{ doc.status|title }}</td>
                    <td>{{ doc.file.url|slice:"-3:"|upper }}</td>
<td style="width: 120px;">


   
     <a href="{% url 'document_detail' doc.id %}" class="btn btn-sm btn-success">
            <i class="fas fa-edit me-2"></i> 
        </a>
    <!-- Download Button -->
       <a href="{{ doc.file.url }}" target="_blank" class="btn btn-sm btn-secondary">
    <i class="fas fa-eye me-2"></i> View
  </a>
    <a href="{{ doc.file.url }}" class="btn btn-sm btn-primary" download>
       <i class="fas fa-download me-2"></i>
        
    </a>

    <!-- Delete Button -->
    <form method="POST" action="{% url 'delete_document' doc.id %}" style="display:inline;">
        {% csrf_token %}
        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this document?');">
                                                  <i class="fas fa-trash-alt"></i>

        </button>
    </form>
</td>
                </tr>
            {% empty %}
                <tr><td colspan="9" class="text-center">No Drafts found.</td></tr>
            {% endfor %}
                          </tbody>
                      </table><!--end /table-->
                      
                     <div class="row align-items-center mt-3">
    <div class="col">
        <div class="datatable-info">
            Showing {{ drafts.start_index }} to {{ drafts.end_index }} of {{ drafts.paginator.count }} entries
        </div>
    </div>
    <div class="col-auto">
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-end mb-0">
                {% if drafts.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?active_tab=document-drafts&drafts_page={{ drafts.previous_page_number }}&drafts_doc_id={{ drafts_filters.doc_id }}&drafts_file_name={{ drafts_filters.file_name }}&drafts_category={{ drafts_filters.category }}&drafts_status={{ drafts_filters.status }}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                {% endif %}

                {% for num in drafts.paginator.page_range %}
                    {% if drafts.number == num %}
                        <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="?active_tab=document-drafts&drafts_page={{ num }}&drafts_doc_id={{ drafts_filters.doc_id }}&drafts_file_name={{ drafts_filters.file_name }}&drafts_category={{ drafts_filters.category }}&drafts_status={{ drafts_filters.status }}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if drafts.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?active_tab=document-drafts&drafts_page={{ drafts.next_page_number }}&drafts_doc_id={{ drafts_filters.doc_id }}&drafts_file_name={{ drafts_filters.file_name }}&drafts_category={{ drafts_filters.category }}&drafts_status={{ drafts_filters.status }}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>

                      </div>
                  </div><!--end /tableresponsive-->             
              </div><!--end card-body--> 
          </div><!--end card--> 
          </div>
          <div class="tab-pane fade" id="nav-document-action-required" role="tabpanel" aria-labelledby="nav-document-action-required-tab">
            <!-- start card -->
          <div class="card mb-0">
              <div class="card-header">
                  <div class="row align-items-center">
                      <div class="card border-0 mb-0">
                          <!-- start table search form--> 
                            <form class="row align-items-center filter-form" method="get">
    <input type="hidden" name="active_tab" value="document-action-required">

    <div class="col-auto">
        <input type="text" name="action_doc_id" placeholder="Doc ID" class="form-control" value="{{ action_filters.doc_id }}">
    </div>
    <div class="col-auto">
        <input type="text" name="action_file_name" placeholder="File Name" class="form-control" value="{{ action_filters.file_name }}">
    </div>
    <div class="col-auto">
        <input type="text" name="action_category" placeholder="Category" class="form-control" value="{{ action_filters.category }}">
    </div>
    <div class="col-auto">
        <input type="text" name="action_status" placeholder="Status" class="form-control" value="{{ action_filters.status }}">
    </div>
    <div class="col-auto">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
    
</form>

                          </div>
                  </div>  <!--end row-->                                  
              </div><!--end card-header-->
              <div class="card-body pt-0">
                  <div class="table-responsive-none">
                      <table class="table mb-3 table-centered border-bottom table-hover">
                          <thead class="table-light">
                          <tr>
                              <th>#</th>
                              <th>Doc ID</th>
                              <th>File Name</th>
                              <th>Category</th>
                              <th>Signers</th>
                              <th>Date</th>
                              <th>Status</th>
                              <th>Document Type</th>
                              <th class="text-end">Action</th>
                          </tr>
                          </thead>
                         <tbody>
        {% for flow in action_required %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>#{{ flow.document.id }}</td>
            <td>{{ flow.document.title }}</td>
            <td>{{ flow.document.category|title }}</td>
            <td>{{ flow.document.owner.get_full_name }}</td>
            <td>{{ flow.document.created_at|date:"M d, Y H:i" }}</td>
            <td>{{ flow.document.status|title }}</td>
            <td>{{ flow.document.file.url|slice:"-3:"|upper }}</td>
            <td class="text-end">
                <!-- Sign button -->
                <!-- <a href="{% url 'sign_document' flow.token flow.recipient_email|urlencode %}" class="btn btn-sm btn-success">
    Sign
</a> -->


                <!-- Download button -->
                  <a href="{{ flow.document.file.url }}" class="btn btn-sm btn-info" target="_blank" title="View Original File">
                <i class="fas fa-eye"></i>
            </a>
                <a href="{{ flow.document.file.url }}" class="btn btn-sm btn-primary" download>
                    <i class="fas fa-download"></i>
                </a>

                <!-- Delete button -->
                <form method="POST" action="{% url 'delete_document' flow.document.id %}" style="display:inline;">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?');">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </form>
            </td>
        </tr>
        {% empty %}
        <tr>
            <td colspan="9" class="text-center">No Action Required documents found.</td>
        </tr>
        {% endfor %}
    </tbody>
                      </table><!--end /table-->
                     <div class="row align-items-center mt-3">
    <div class="col">
        <div class="datatable-info">
            Showing {{ action_required.start_index }} to {{ action_required.end_index }} of {{ action_required.paginator.count }} entries
        </div>
    </div>
    <div class="col-auto">
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-end mb-0">
                {% if action_required.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?active_tab=document-action-required&action_page={{ action_required.previous_page_number }}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                {% endif %}

                {% for num in action_required.paginator.page_range %}
                    {% if action_required.number == num %}
                        <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="?active_tab=document-action-required&action_page={{ num }}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if action_required.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?active_tab=document-action-required&action_page={{ action_required.next_page_number }}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>

</div>
              </div><!--end card-body--> 
          </div><!--end card--> 
          </div>
          <div class="tab-pane fade" id="nav-waiting-for-others" role="tabpanel" aria-labelledby="nav-waiting-for-others-tab">
            <!-- start card -->
          <div class="card mb-0">
              <div class="card-header">
                  <div class="row align-items-center">
                      <div class="card border-0 mb-0">
                          <!-- start table search form--> 
                            <form class="row align-items-center filter-form" method="get">
    <input type="hidden" name="active_tab" value="document-waiting">

    <div class="col-auto">
        <input type="text" name="waiting_doc_id" placeholder="Doc ID" class="form-control" value="{{ waiting_filters.doc_id }}">
    </div>
    <div class="col-auto">
        <input type="text" name="waiting_file_name" placeholder="File Name" class="form-control" value="{{ waiting_filters.file_name }}">
    </div>
    <div class="col-auto">
        <input type="text" name="waiting_category" placeholder="Category" class="form-control" value="{{ waiting_filters.category }}">
    </div>
    <div class="col-auto">
        <input type="text" name="waiting_status" placeholder="Status" class="form-control" value="{{ waiting_filters.status }}">
    </div>
    <div class="col-auto">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

                          </div>
                  </div>  <!--end row-->                                  
              </div><!--end card-header-->
              <div class="card-body pt-0">
                  <div class="table-responsive-none">
                      <table class="table mb-3 table-centered border-bottom table-hover">
                          <thead class="table-light">
                          <tr>
                              <th>#</th>
                              <th>Doc ID</th>
                              <th>File Name</th>
                              <th>Category</th>
                              <th>Signers</th>
                              <th>Date</th>
                              <th>Status</th>
                              <th>Document Type</th>
                              <th class="text-end">Action</th>
                          </tr>
                          </thead>
                          <tbody>
                           {% for doc in waiting_for_others %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>#{{ doc.id }}</td>
            <td>
                <span class="rounded-circle thumb-md me-1 d-inline">
                    <i class="far fa-file-pdf"></i>
                </span>
                {{ doc.title }}
            </td>
            <td>{{ doc.category }}</td>
          <td>
    <div class="d-flex justify-content-center align-items-center">
        {% for signer in doc.sign_flow.all|slice:":3" %}
            <div class="position-relative" style="margin-left: {% if not forloop.first %}-10px{% else %}0{% endif %};">
                <div class="thumb-md rounded-circle d-flex justify-content-center align-items-center text-white fw-bold"
                     style="background-color:#0d6efd; border:2px solid #fff;">
                    {{ signer.recipient_email|slice:":1"|upper }}
                </div>
            </div>
        {% endfor %}

        {% if doc.sign_flow.count > 3 %}
            <div class="position-relative ms-1">
                <span class="thumb-md shadow-sm d-flex justify-content-center align-items-center bg-info-subtle rounded-circle fw-semibold fs-6 border border-white">
                    +{{ doc.sign_flow.count|add:"-3" }}
                </span>
            </div>
        {% endif %}
    </div>
</td>


            <td>{{ doc.created_at|timesince }} ago</td>
            <td class="text-info fw-bold">In Progress</td>
            <td>{{ doc.file.url|slice:"-3:"|upper }}</td>
            <td class="text-end">
                <div class="dropdown d-inline-block">
                    <a class="dropdown-toggle arrow-none btn btn-success btn-sm" data-bs-toggle="dropdown" href="#">
                        <i class="fas fa-download"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end p-2">
                        <form class="document-download-form">
                            <div class="mb-2">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input downloadAllSignedFiles">
                                    <label class="form-check-label">Download All Signed Files</label>
                                </div>
                            </div>
                            <div class="mb-2">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input downloadOriginalFile">
                                    <label class="form-check-label">Download Original File</label>
                                </div>
                            </div>
                            <div class="dropdown-divider"></div>
                            <p class="fw-bold">or select recipients</p>
                            {% for signer in doc.sign_flow.all %}
                            <div class="mb-2">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input recipientCheckbox">
                                    <label class="form-check-label">{{ signer.recipient_email }}</label>
                                </div>
                            </div>
                            {% endfor %}
                            
                            <button type="submit" class="btn btn-primary mt-2">
                                <i class="fas fa-download me-2"></i> Download
                            </button>
                        </form>
                    </div>
                </div>
                <button class="btn btn-danger btn-sm ms-2">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </td>
        </tr>
        {% empty %}
        <tr>
            <td colspan="9" class="text-center">No documents waiting for others.</td>
        </tr>
        {% endfor %}
    </tbody>

                          </tbody>
                      </table><!--end /table-->
                      
                     <div class="row align-items-center mt-3">
    <div class="col">
        <div class="datatable-info">
            Showing {{ action_required.start_index }} to {{ action_required.end_index }} of {{ action_required.paginator.count }} entries
        </div>
    </div>
    <div class="col-auto">
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-end mb-0">
                {% if action_required.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?active_tab=document-action-required&action_page={{ action_required.previous_page_number }}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                {% endif %}

                {% for num in action_required.paginator.page_range %}
                    {% if action_required.number == num %}
                        <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="?active_tab=document-action-required&action_page={{ num }}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if action_required.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?active_tab=document-action-required&action_page={{ action_required.next_page_number }}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>

                  </div><!--end /tableresponsive-->             
              </div><!--end card-body--> 
          </div><!--end card--> 
          </div>
          <div class="tab-pane fade" id="nav-document-finalized" role="tabpanel" aria-labelledby="nav-document-finalized-tab">
            <!-- start card -->
          <div class="card mb-0">
              <div class="card-header">
                  <div class="row align-items-center">
                      <div class="card border-0 mb-0">
                          <!-- start table search form--> 
                            <form class="row align-items-center filter-form" method="get">
    <input type="hidden" name="active_tab" value="document-finalized">

    <div class="col-auto">
        <input type="text" name="finalized_doc_id" placeholder="Doc ID" class="form-control" value="{{ finalized_filters.doc_id }}">
    </div>
    <div class="col-auto">
        <input type="text" name="finalized_file_name" placeholder="File Name" class="form-control" value="{{ finalized_filters.file_name }}">
    </div>
    <div class="col-auto">
        <input type="text" name="finalized_category" placeholder="Category" class="form-control" value="{{ finalized_filters.category }}">
    </div>
    <div class="col-auto">
        <input type="text" name="finalized_status" placeholder="Status" class="form-control" value="{{ finalized_filters.status }}">
    </div>
    <div class="col-auto">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

                          </div>
                  </div>  <!--end row-->                                  
              </div><!--end card-header-->
              <div class="card-body pt-0">
                  <div class="table-responsive-none">
                      <table class="table mb-3 table-centered border-bottom table-hover">
                          <thead class="table-light">
                          <tr>
                              <th>#</th>
                              <th>Doc ID</th>
                              <th>File Name</th>
                              <th>Category</th>
                              <th>Signers</th>
                              <th>Date</th>
                              <th>Status</th>
                              <th>Document Type</th>
                              <th class="text-end">Action</th>
                          </tr>
                          </thead>
                           <tbody>
        {% for doc in finalized %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>#{{ doc.id }}</td>
            <td>{{ doc.title }}</td>
            <td>{{ doc.category|title }}</td>
            <td>
                {% if doc.merged_file %}
                    {{ doc.merged_file.name|slice:"0:10" }} <!-- example -->
                {% else %}
                    N/A
                {% endif %}
            </td>
            <td>{{doc.created_at}}</td>
            <td>{{ doc.status|title }}</td>
            <td>{{ doc.file.url|slice:"-3:"|upper }}</td>
            <td class="text-end">
    {% comment %} Show merged file if available {% endcomment %}
    {% with merged=doc.sign_flow.first.merged_file %}
        {% if merged %}
            <!-- View Merged File -->
    <!-- View Original File -->
    <a href="{{ doc.file.url }}" 
       class="btn btn-sm btn-info" 
       target="_blank" 
       data-bs-toggle="tooltip" 
       data-bs-placement="top" 
       title="View Original File">
        <i class="fas fa-eye"></i>
    </a>

    <!-- Download Merged File -->
    <a href="{{ merged.url }}" 
       class="btn btn-sm btn-primary" 
       download 
       data-bs-toggle="tooltip" 
       data-bs-placement="top" 
       title="Download Final Signed File">
        <i class="fas fa-download"></i>
    </a>

        {% else %}
            <!-- Fallback: original file -->
            <a href="{{ doc.file.url }}" class="btn btn-sm btn-info" target="_blank" title="View Original File">
                <i class="fas fa-eye"></i>
            </a>
            <a href="{{ doc.file.url }}" class="btn btn-sm btn-primary" download title="Download Original File">
                <i class="fas fa-download"></i>
            </a>
        {% endif %}
    {% endwith %}
</td>

        </tr>
        {% empty %}
        <tr>
            <td colspan="8" class="text-center">No finalized documents.</td>
        </tr>
        {% endfor %}
    </tbody>
                      </table><!--end /table-->
                      
                     <div class="row align-items-center mt-3">
    <div class="col">
        <div class="datatable-info">
            Showing {{ finalized.start_index }} to {{ finalized.end_index }} of {{ finalized.paginator.count }} entries
        </div>
    </div>
    <div class="col-auto">
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-end mb-0">
                {% if finalized.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?active_tab=document-finalized&finalized_page={{ finalized.previous_page_number }}&finalized_doc_id={{ finalized_filters.doc_id }}&finalized_file_name={{ finalized_filters.file_name }}&finalized_category={{ finalized_filters.category }}&finalized_status={{ finalized_filters.status }}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                {% endif %}

                {% for num in finalized.paginator.page_range %}
                    {% if finalized.number == num %}
                        <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="?active_tab=document-finalized&finalized_page={{ num }}&finalized_doc_id={{ finalized_filters.doc_id }}&finalized_file_name={{ finalized_filters.file_name }}&finalized_category={{ finalized_filters.category }}&finalized_status={{ finalized_filters.status }}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if finalized.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?active_tab=document-finalized&finalized_page={{ finalized.next_page_number }}&finalized_doc_id={{ finalized_filters.doc_id }}&finalized_file_name={{ finalized_filters.file_name }}&finalized_category={{ finalized_filters.category }}&finalized_status={{ finalized_filters.status }}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>

                      </div>
                  </div><!--end /tableresponsive-->             
              </div><!--end card-body--> 
          </div><!--end card--> 
          </div>
        </div>

      </div> <!--end col-->                                                     
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
    const tabLinks = document.querySelectorAll('#signature-status-nav-tab button');

    tabLinks.forEach(tab => {
        tab.addEventListener('shown.bs.tab', function(e) {
            const activeTabInput = document.querySelector('#activeTabInput');
            if (activeTabInput) {
                // Update hidden input value on tab change
                activeTabInput.value = e.target.getAttribute('data-bs-target').replace('#nav-', '');
            }
        });
    });

    // On page load, open the tab from URL
    const urlParams = new URLSearchParams(window.location.search);
    const activeTab = urlParams.get('active_tab');
    if (activeTab) {
        const tabTriggerEl = document.querySelector(`#signature-status-nav-tab button[data-bs-target="#nav-${activeTab}"]`);
        if (tabTriggerEl) {
            const tab = new bootstrap.Tab(tabTriggerEl);
            tab.show();
        }
    }
});


document.addEventListener("DOMContentLoaded", function() {
    const tabLinks = document.querySelectorAll('#signature-status-nav-tab button');

    tabLinks.forEach(tab => {
        tab.addEventListener('shown.bs.tab', function(e) {
            // Reset all filter forms
            document.querySelectorAll('.filter-form').forEach(form => form.reset());
        });
    });
});


</script>


{% endblock %}